<template>
    <div id="app">
        <div class="logo">
            <img src="../assets/d9f45a0972716221415fd260ecbb380b76d9b5512d4a-4nKsbV_fw658.jpg" alt="">
            <span>璐璐家的翘脚牛肉</span>
        </div>
        <div class="admin">
            <span class="iconfont icon-huabanfuben">{{loginUser.username}}</span>
            <span>，欢迎你</span>
            <el-button type="text" @click="outLogin">退出登录</el-button>
        </div>

    </div>
</template>

<script>
    import utils from '../utils/utils'
    export default {
        name: "MyHeader",
        data(){
            return{
                loginUser:utils.getStorage('user')||{}
            }
        },
        methods:{
            outLogin(){
                this.$confirm('确认退出登录?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    this.$message({
                        type: 'success',
                        message: '退出登录成功!',
                    });
                    this.$router.push('/login');
                    sessionStorage.removeItem(loginUser)
                }).catch({})
            }
        }
    }
</script>

<style scoped>
    #app{
        display: flex;
        justify-content: space-between;
    }
    .logo>img {
        height: 55px;
        float: left;
    }
    .logo>span{
        display: inline-block;
        height: 55px;
        float: left;
        line-height: 55px;
        margin-left: 10px;
        color: red;
        font-size: 16px;
    }
    .admin>span{
        display: inline-block;
        height: 55px;
        line-height: 55px;
        font-size: 16px;
        color: black;
    }
    .admin>button{
        margin-left: 10px;
        color: red;
    }
</style>